$mainBlack: #222;
$mainColor: #595959;
$topBorder: #25AAE1;

@import "foundation","normalize","mixins";

html, body{
    overflow-x: hidden;
    @include transition(0.3s);
}
body{
    position: relative;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6em;
    -webkit-font-smoothing: antialiased;
}

a{text-decoration: none;}
.main-title{
    padding-top: 60px;
    padding-bottom: 25px;
    h2{
        color: $mainBlack;
        font-size: 1.875em;
        font-style: italic;
        text-align: center;
        font-weight: bold;
        line-height: 2em;
        margin: 0;
    }
    p{
        color: $mainColor;
        font-size: 1.125em;
        font-style: italic;
        font-weight: 300;
    }
}

.tbM{margin: 60px 0;}

body.main-menu{
    left: -200px;
    header{
        nav{
            right: 0px;
        }
    }
}
/*NAV*/
header{
    width: 100%;
    background-color: $mainBlack;
    border-top: 5px solid $topBorder;
    .row{
        max-width: 65rem;
        height: 70px;
        #main-logo{
            display: block;
            float: left;
            width: 60px;
            height: 70px;
            line-height: 70px;
            margin: 0 15px;
        }
    }
    #toggle-menu{
        color: #fff;
        float: right;
        width: 50px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        font-size: 26px;
        margin: 0 10px;
    }
    nav{
        border-top: 5px solid $topBorder;
        background-color: $topBorder;
        position: fixed;
        width: 200px;
        right: -200px;
        top: 0;
        height: 100vh;
        @include box-sizing(border-box);
        @include transition(0.3s, right);
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            li{
                border-bottom: 1px solid #1E9FD7;
                a{
                    display: block;
                    height: 70px;
                    line-height: 70px;
                    color: #fff;
                    text-transform: uppercase;
                    padding: 0 20px;
                    font-size: 0.875em;
                    &:hover{
                        background-color: #3bb3e4;
                    }
                }
                &.bull{
                    display: none;
                }
            }
        }
    }
}

/*SLIDER BANNER*/
section[role*="banner"]{
    position: relative;
    ul{
        display: none;
        width: 100%;
        max-height: 450px;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    .loader{
        position: relative;
        padding-top: 43.417%;
        margin-bottom: 25px;
        img{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
        }
    }
    /*margin: 30px 0 0;*/
    .orbit-bullets{
        display: none;
        top: 0;
        margin-bottom: 0;
        padding: 0;
        cursor: pointer;
        margin-top: 15px;
        li{
            margin-right: 12px;
            &.active{
                background: $topBorder;
            }
            &:last-child{
                margin-right: 0;
            }
        }
    }
    .orbit-timer{
        display: none;
    }
    h1{
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 2em;
        color: #FFF;
        z-index: 100;
        margin: -52px 0 0 -138px;
        line-height: 1.2;
        text-shadow: 2px 2px 6px #444;
        @include transition (0.3s);
        text-align: center;
    }
}

/*WHO WE ARE*/
.who-we-are{
    color: $mainColor;
    text-align: center;
    .company-desc{
        margin: 50px auto 110px;
        
        img{width: 70%;height: auto;}
        h3{
            font-weight: 700;
            font-size: 1.125em;
        }
        p{
            font-size: 0.875em;
            font-weight: 400;
            line-height: 1.78572;
        }
    }
}

/*QUOTE SLIDER*/
.quote-wrapper{
    width: 100%;
    padding: 15px 0;
    background: #eee;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    .orbit-container{
        overflow: visible !important;
    }
    .row{max-width: 70rem}
    ul{
        text-align: center;
        overflow: hidden !important;
        margin: 0 25px !important;
    }
    .orbit-timer{display: none;}
    li{
        div{
            padding: 0 50px;
            p{
                font-size: 1.5em;
                color: $mainColor;
                font-weight: 300;
                font-style: italic;
            }
        }
    }
    .prev-gt{
        position: absolute;
        top: 45%;
        margin-top: -5px;
        width: 15px;
        height: 30px;
        line-height: 50px;
        color: white;
        background-color: none;
        text-indent: -9999px !important;
        z-index: 10;
        left: 0;
        background-image: url('../img/prev-arrow.png');
    }
    .next-gt{
        position: absolute;
        top: 45%;
        margin-top: -5px;
        width: 15px;
        height: 30px;
        line-height: 50px;
        color: white;
        background-color: none;
        text-indent: -9999px !important;
        z-index: 10;
        right: 0;
        background-image: url('../img/next-arrow.png');
    }
}

/*GET IN TOUCH*/
.get-in-touch{
    background-color: $mainBlack;
    color: #FFF;
    
    .large-12{
        padding: 60px 0;
    }
    
    h2{
        text-align: center;
        margin: 0 0 20px 0;
    }
    a{
        display: block;
        height: 40px;
        width: 140px;
        font-size: 1.2em;
        font-weight: bold;
        background-color: $topBorder;
        margin: 0 auto;
        padding: 0;
        line-height: 40px;
        text-align: center;
        @include border-radius(3px);
        color: #fff;
        @include transition(0.3s);
        &:hover{
            background-color: #3bb3e4;
        }
    }
}

/*MAP CSS*/
#map-canvas{
    width: 100%;
    height: 300px;
    padding: 0;
    border-top: 7px solid $topBorder;
}
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline;}
.gm-style > .gm-style-cc{
    display: none;
}
/*FOOTER*/
footer{
    width: 100%;
    border-top: 1px solid #ccc;
    p{
        font-size: 0.6875em !important;
        color: $mainColor;
        text-align: center;
        font-size: 1.125em;
    }
}

/*CONTACT*/
.contact-wrapper{
    color: $mainColor;
    .bBorder{
        margin: 10px auto;
        border-bottom: 1px solid #ccc;
        padding: 15px 0;
        .large-3{
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
    p{
        text-align: center;
        margin: 0;
        span{
            color: $mainColor;
            font-size: 1.125em;
            font-weight: 700;
        }
    }
    a{color: $mainColor;}
    .follow-box{
        width: 70px;
        margin: 0 auto;
        a{
            display: inline-block;
            height: 25px;
            width: 25px;
            margin: 5px;
        }
    }
    #map-canvas{border-top: none;}
    form[data-abide]{
        padding: 40px 0;
        .row{margin-bottom: 10px;}
        p{font-weight: 700;}
        input, textarea{
            width: 100%;
            font-size: 0.875em;
            font-style: italic;
            color: #444;
            padding: 5px;
            margin-bottom: 0;
        }
        textarea{
            resize: none;
            height: 100px;
        }
        input{
            height: 40px;
        }
        button{
            display: block;
            height: 40px;
            width: 100%;
            font-size: 1.2em;
            font-weight: bold;
            background-color: $topBorder;
            padding: 0;
            line-height: 40px;  
            text-align: center;
            &:hover{
                background-color: #3bb3e4;
            }
        }
        small.error{
            margin: 0;
            padding-top: 0;
            padding-bottom: 0;
        }
    }
    .send-message{
        height: 500px;
        .loading{
            
        }
        .done{
            display: none;
            padding-top: 150px;
            text-align: center;
            font-size: 1.5em;
            color: $mainColor;
            font-weight: 300;
            font-style: italic;
            p{
                margin-top: 35px;
            }
        }
    }
}

/*SERVICES*/
.services{
    color: $mainColor;
    text-align: center;
    h1{
        font-size: 1.125em;
        color: $mainColor;
        font-weight: 400;
        font-style: italic;
    }
    .tabServices{
        margin: 0 0 100px 0;
        border-top: 1px solid #ccc;
        overflow: hidden;
    }
    .tabs dd a{
        display: block;
        width: 100%;
        background-color: #fff;
        padding: 20px;
        text-align: left;
        h3{
            font-size: 0.875em;
            margin: 0;
            line-height: 1.2;
        }
        p{
            font-size: 0.875em;
            margin: 0;
            line-height: 1.2;
        }
        .serv-icon{
            float: left;
            height: 25px;
            width: 25px;
            margin: 4px 15px 0 0;
            background-image: url('../img/services/services-sprite.png');
            background-image: url('../img/services/services-sprite.svg');
            background-size: 150px 50px;
            background-repeat: no-repeat;
        }
        
        &.serv-uno .serv-icon{ background-position: 0px -25px; }
        &.serv-dos .serv-icon{ background-position: -25px -25px; }
        &.serv-tres .serv-icon{ background-position: -50px -25px; }
        &.serv-cuatro .serv-icon{ background-position: -75px -25px; }
        &.serv-cinco .serv-icon{ background-position: -100px -25px; }
        &.serv-seis .serv-icon{ background-position: -125px -25px; }
    }
    .tabs dd.active a{
        background-color: #eee;
        &.serv-uno .serv-icon{ background-position: 0px 0px; }
        &.serv-dos .serv-icon{ background-position: -25px 0px; }
        &.serv-tres .serv-icon{ background-position: -50px 0px; }
        &.serv-cuatro .serv-icon{ background-position: -75px 0px; }
        &.serv-cinco .serv-icon{ background-position: -100px 0px; }
        &.serv-seis .serv-icon{ background-position: -125px 0px; }
    }
    dd{margin: 0;border-bottom: 1px solid #ccc;
        a:hover{
            background-color: #eee;
            &.serv-uno .serv-icon{ background-position: 0px 0px; }
            &.serv-dos .serv-icon{ background-position: -25px 0px; }
            &.serv-tres .serv-icon{ background-position: -50px 0px; }
            &.serv-cuatro .serv-icon{ background-position: -75px 0px; }
            &.serv-cinco .serv-icon{ background-position: -100px 0px; }
            &.serv-seis .serv-icon{ background-position: -125px 0px; }
        }
    }
    .tabs.vertical{width: 100%;margin: 0;}
    .tabs-content.vertical{
        width: 100%;
        padding: 8px 5px 1000px 5px;
        margin-bottom: -930px;
        text-align: left;
        h3{
            font-size: 1em;
            margin: 0;
            line-height: 2.5;
        }
        p{
            font-size: 0.875em;
            margin: 0;
            line-height: 1.4;
            padding: 10px 0;
        }
    }
    
    
}
@import "medias";